<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS选择器优先级</title>
    <style>
        body {
            line-height: 1.5;
        }

        .content {
            width: 80%;
            margin: 20px auto;
            padding: 30px 0;
            text-align: center;
            border: 2px solid #333;
        }

        h3 {
            text-align: left;
        }

        .font-w {
            font-weight: bold;
        }

        .cs-button {
            background-color: darkblue;
            color: white;
        }

        .cs-button:hover {
            background-color: blue;
        }

        /* \31外加空格是CSS中字符1的十六进制转码表示 */
        .\31 -foo {
            border: 10px dashed red;
            padding: 10px;
        }

        .cs-content {
            height: 60px;
            line-height: 20px;
            overflow: hidden;
        }

        .cs-content.active {
            height: auto;
        }

        .active>.cs-content-more {
            display: none;
        }

        .lightblue p {
            color: lightblue;
        }

        .darkblue p {
            color: darkblue;
        }

        ol li {
            color: darkblue;
            text-decoration: underline;
        }

        ol>li {
            color: lightblue;
            text-decoration: underline wavy;
        }

        /* .gs-p + .gs-p{
            color: red;
        } */

        /* .gs-p:first-child{
            color: red;
        } */

        .cs-tips {
            color: gray;
            margin-left: 15px;
            position: absolute;
            visibility: hidden;
        }

        :focus+.cs-tips {
            visibility: visible;
        }

        /* .gs-hover-img{
           display: none;
           width: 50px;
           height: 50px;
           margin-left: 10px;
           position: absolute;
       } */
        .gs-hover-img {
            width: 50px;
            height: 50px;
            margin-left: 10px;
            position: absolute;
            visibility: hidden;
            transition: visibility .2s;
        }

        a:hover+.gs-hover-img,
        .gs-hover-img:hover {
            /* display: inline-block; */
            visibility: visible;
        }

        .gs-focus:focus {
            background-color: red;
        }

        .gs-icon {
            width: 20px;
            height: 20px;
        }

        .img-qrcode {
            position: absolute;
            width: 100px;
            height: 100px;
            display: none;
        }

        :focus+.img-qrcode {
            display: inline-block;
        }


        .cs-normal:focus-within .cs-label {
            color: darkblue;
            font-size: 32px;
            text-shadow: 0 0 1px;
        }

        .cs-details {
            width: 10%;
            margin: 20px auto;
            border: 1px solid red;
        }

        .cs-details a {
            display: block;
        }

        .cs-datalist {
            display: none;
        }

        .cs-details:focus-within .cs-datalist {
            display: block;
        }

        li:target {
            color: red;
            font-size: 32px;
        }

        .gs-target {
            width: 400px;
            padding: 20px;
            margin: 0 auto;
        }

        .gs-target [data-open="true"] {
            display: block;
        }

        .cs-more-p,
        [data-open="false"] {
            display: none;
        }

        :target~[data-open="true"] {
            display: none;
        }

        :target~[data-open="false"],
        :target~.cs-more-p {
            display: block;
        }

        :disabled {
            border: 1px solid lightblue;
            background-color: #f0f0f3;
        }

        [disabled] {
            background-color: red;
        }

        :enabled {
            /* background: plum; */
        }

        textarea:read-only {
            background-color: gray;
        }

        textarea:read-write {
            background-color: green;
        }

        input:placeholder-shown {
            border-color: red;
        }

        option:default {
            color: red;
        }

        input:default+label::after {
            content: '(推荐)';
        }

        input:checked {
            box-shadow: 0 0 0 2px red;
        }

        .gs-input[type=radio] {
            position: absolute;
            width: 20px;
            height: 20px;
            opacity: 0;
            cursor: pointer;
        }

        .gs-label {
            display: inline-block;
            position: relative;
            width: 20px;
            height: 20px;
            border: 1px solid gray;
            border-radius: 50%;
            background-color: red;
        }

        :checked+.gs-label::before {
            content: '';
            display: block;
            position: absolute;
            top: 2px;
            bottom: 2px;
            left: 2px;
            right: 2px;
            content: "";
            display: block;
            width: 8px;
            height: 3px;
            border-left: 2px solid;
            border-bottom: 2px solid;
            margin: 4px auto 0;
            -ms-transform: rotate(-45deg);
            transform: rotate(-45deg);
        }

        .cs-valid-input {
            border: 1px solid gray;
        }

        .valid .cs-valid-input:invalid {
            border-color: red;
        }

        .valid .cs-valid-input:valid+.cs-valid-tips::before {
            content: "√";
            color: green;
        }

        .valid .cs-valid-input:invalid+.cs-valid-tips::before {
            content: "不符合要求";
            color: red;
        }

        .valid .cs-valid-input:placeholder-shown+.cs-valid-tips::before {
            content: "尚未输入值";
        }

        input:in-range {
            outline: 2px dashed green;
        }

        input:out-of-range {
            outline: 2px solid red;
        }

        :required {
            outline: green 2px solid;
        }

        :optional {
            box-shadow: 0 0 0 2px red;
        }

        .content-ul {
            text-align: left;
            font-weight: bold;
        }

        .content-ul li {
            width: 50%;
            list-style: none;

            margin: 20px auto;
            padding: 20px;
            border: 1px solid red;
        }

        .content-ul li span {
            display: block;
        }

        .cs-empty::after {
            content: "after";
        }

        .cs-empty:empty {
            width: 120px;
            padding: 20px;
            border: 10px dashed;
        }

        .cs-empty:not(:empty) {
            width: 120px;
            height: 20px;
            margin: 20px;
            border: 1px green solid;
        }

        dd:empty::after {
            content: "暂无";
        }

        .gs-ol> :first-child::after {
            content: "(第一个)";
            color: red;
        }

        .gs-ol>:last-child::after {
            content: "(最后一个)";
            color: green;
        }

        .gs-only-child-p:only-child {
            color: red;
        }

        /* 4 5 6 7 8 9 10 n+4
        10 9 8 7 6 5 4 -n+10 */
        .gs-nth-li:nth-child(n+4):nth-child(-n+10) {
            color: red;

        }

        .gs-nth-table {
            border-spacing: 0;
            width: 300px;
            text-align: center;
            border: 1px solid #ccc;
        }

        .gs-nth-tr {
            background: #fff;
        }

        .gs-nth-tr:nth-child(even) {
            background: #eee;
        }

        .gs-nth-div {
            width: 80%;
            margin: 20px auto;
            border: 1px solid red;
        }

        .gs-nth-div::after {
            content: '';
            display: block;
            clear: both;
        }

        .gs-nth-li1 {
            float: left;
            list-style: none;
            width: calc((100% - 40px) /5);
            height: 10px;
            margin-right: 10px;
            margin-top: 10px;
            background: yellowgreen;
        }

        .gs-nth-li1:nth-child(5n) {
            margin-right: 0px;
        }

        .gs-type>:first-of-type {
            color: red;
        }

        .gs-type>:last-of-type {
            font-weight: bold;
            color: green;
        }

        .gs-only-div>:only-of-type {
            color: red;
            font-size: 32px;
            font-weight: bold;
        }
    </style>
</head>

<body>
    <div class="content">
        <h3>:only-of-type伪类</h3>
        <p></p>
        <div class="gs-only-div">
            <p>p标签</p>
            <p>p标签</p>
            <a href="">a标签</a>
            <h3>h3标签</h3>
        </div>
    </div>
    <div class="content">
        <h3>:first-of-type伪类和:last-of-type伪类</h3>
        <div class="gs-type">
            <p class="gs-type-p">1</p>
            <a href="">a链接</a>
            <a href="">a链接</a>
            <p class="gs-type-p">2</p>
            <p class="gs-type-p">3</p>
            <p class="gs-type-p">4</p>
        </div>
    </div>
    <div class="content">
        <h3>:nth-child()伪类和:nth-lase-child()伪类</h3>
        <ul>固定区间列表高亮
            <li class="gs-nth-li">1</li>
            <li class="gs-nth-li">2</li>
            <li class="gs-nth-li">3</li>
            <li class="gs-nth-li">4</li>
            <li class="gs-nth-li">5</li>
            <li class="gs-nth-li">6</li>
            <li class="gs-nth-li">7</li>
            <li class="gs-nth-li">8</li>
            <li class="gs-nth-li">9</li>
            <li class="gs-nth-li">10</li>
            <li class="gs-nth-li">11</li>
        </ul>
        <h3>斑马条纹</h3>
        <table class="gs-nth-table">
            <tr class="gs-nth-tr">
                <th>斑马条纹</th>
            </tr>
            <tr class="gs-nth-tr">
                <th>斑马条纹</th>
            </tr>
            <tr class="gs-nth-tr">
                <th>斑马条纹</th>
            </tr>
            <tr class="gs-nth-tr">
                <th>斑马条纹</th>
            </tr>
            <tr class="gs-nth-tr">
                <th>斑马条纹</th>
            </tr>
            <tr class="gs-nth-tr">
                <th>斑马条纹</th>
            </tr>
            <tr class="gs-nth-tr">
                <th>斑马条纹</th>
            </tr>
            <tr class="gs-nth-tr">
                <th>斑马条纹</th>
            </tr>
        </table>
        <h3>列表边缘对齐</h3>
        <div class="gs-nth-div">
            <ul>
                <li class="gs-nth-li1"></li>
                <li class="gs-nth-li1"></li>
                <li class="gs-nth-li1"></li>
                <li class="gs-nth-li1"></li>
                <li class="gs-nth-li1"></li>
                <li class="gs-nth-li1"></li>
                <li class="gs-nth-li1"></li>
                <li class="gs-nth-li1"></li>
                <li class="gs-nth-li1"></li>
                <li class="gs-nth-li1"></li>
                <li class="gs-nth-li1"></li>
                <li class="gs-nth-li1"></li>
            </ul>
        </div>
    </div>
    <div class="content">
        <h3>:only-child伪类</h3>
        <div class="gs-only-child">
            <p class="gs-only-child-p">确定删除内容？</p>
        </div>
    </div>
    <div class="content">
        <h3>:first-child伪类和:last-child</h3>
        <ol class="gs-ol">
            <li>内容</li>
            <li>内容</li>
            <li>内容</li>
            <li>内容</li>
        </ol>
    </div>
    <div class="content">
        <h3>:empty伪类</h3>
        <ul class="content-ul">
            <li>空标签<div class="cs-empty"></div>
            </li>
            <li>
                <span>前后闭合的替换元素 textarea</span>
                <textarea class="cs-empty" name="" id="" cols="30" rows="10"></textarea>
                <span>textarea元素，有placeholder属性值显示，ie浏览器不匹配</span>
                <textarea class="cs-empty" name="" id="" cols="30" rows="10" placeholder="placeholder"></textarea>
            </li>
            <li>
                <span>非闭合元素 input img</span>
                <input type="text" class="cs-empty">
                <img src="" alt="" class="cs-empty">
            </li>
            <li>
                <span>元素中有空格</span>
                <div class="cs-empty"> </div>
                <span>元素中有注释</span>
                <div class="cs-empty">
                    <!--注释-->
                </div>
                <span>不闭合标签</span>
                <p class="cs-empty">不闭合标签
            </li>
            <li><span>字段缺失智能提示</span>
                <dl>
                    <dt>姓名：</dt>
                    <dd>张三</dd>
                    <dt>性别：</dt>
                    <dd></dd>
                    <dt>年龄：</dt>
                    <dd>23</dd>
                    <dt>邮箱：</dt>
                    <dd></dd>
                </dl>
            </li>
        </ul>
    </div>
    <div class="content">
        <h3>:required和:optional</h3>
        <input type="text" required>
        <select name="" required id="">
            <option value="">1</option>
            <option value="">1</option>
        </select>
        <button>按钮</button>
        <input type="submit" value="按钮" />
    </div>
    <div class="content">
        <h3>范围验证伪类:in-range和:out-of-range</h3>
        <input type="number" min="3" max="5">
        <input type="range" min="3" max="5">

    </div>
    <div class="content">
        <h3>有效验证伪类:valid和:invalid</h3>
        <form id="csForm" novalidate>
            <p>
                验证码 ：<input type="text" class="cs-valid-input" placeholder="请输入" required pattern="\w{4,6}">
                <span class="cs-valid-tips"></span>
            </p>
            <input type="submit" value="提交">
        </form>
    </div>
    <script>
        let csForm = document.getElementById('csForm');
        // 实时验证可以添加input事件
        csForm.addEventListener("input", function (ev) {
            // 添加标志类
            this.classList.add("valid");
        });
        csForm.addEventListener("submit", function (ev) {
            // 添加标志类
            this.classList.add("valid");
            console.log(this.classList);
            console.log(this.checkValidity());
            // 原生的checkValidity()方法，返回整个表单是否验证通过的布尔值
            if (this.checkValidity && this.checkValidity()) {
                console.log("验证通过");
            }
            event.preventDefault();
        })
    </script>
    <div class="content">
        单选框 :placeholder-shown与占位符交互实例页面
        <h3>选中选项伪类:checked</h3>
        <input type="checkbox">
        <input type="checkbox" checked>
        <h3>自定义单选框 使用label关联</h3>
        <input class="gs-input" type="radio" id="radio0" name="radio">
        <label class="gs-label" for="radio0"></label>
        <label for="radio0">选项1</label>
        <input class="gs-input" type="radio" id="radio1" name="radio">
        <label class="gs-label" for="radio1"></label>
        <label for="radio1">选项2</label>
        <input class="gs-input" type="radio" id="radio2" name="radio">
        <label class="gs-label" for="radio2"></label>
        <label for="radio0">选项3</label>
        <input class="gs-input" type="radio" id="radio3" name="radio">
        <label class="gs-label" for="radio3"></label>
        <label for="radio0">选项4</label>
    </div>
    <div class="content">
        <h3>默认选项伪类:default</h3>
        <select name="" id="" multiple>
            <option value="">选项1</option>
            <option value="">选项2</option>
            <option value="">选项3</option>
            <option value="" selected>选项4</option>
        </select>
        <ul>
            <li>使用:default后更加容易维护，以后想更换支付宝为推荐支付，只需要改变支付宝对应的input状态为checked</li>
        </ul>
        <p><input type="radio" name='pay' id="pay0"><label for="pay0">支付宝</label></p>
        <p><input type="radio" name='pay' id="pay1" checked><label for="pay2">微信</label></p>
        <p><input type="radio" name='pay' id="pay2"><label for="pay3">银行卡</label></p>
    </div>
    <div class="content">
        <h3>占位符显示伪类:placeholder-shown</h3>
        <input type="text" placeholder="请输入">
    </div>
    <div class="content">
        <h3>:read-only和:read-write</h3>
        <textarea cols="30" rows="10">默认</textarea>
        <textarea cols="30" rows="10" readonly>只读</textarea>
        <textarea cols="30" rows="10" disabled>禁用</textarea>
    </div>
    <div class="content">
        <h3>:disabled</h3>
        <a href>a元素链接</a>
        <input type="text">
        <input type="text " disabled>
    </div>
    <div class="content">
        <h3>:target伪类与显示全部文章内容实例页面</h3>
        <ul>
            <li>div#articleMore元素是一个隐藏的锚链元素，用来匹配:targer伪类</li>
            <li>a[data-open='true']是阅读更多的按钮，点击地址中url地址，锚点值变成#articleMore，从而触发:target伪类匹配</li>
            <li>p.cs-more-p是默认隐藏的更多的文章内容</li>
            <li>a[data-open=false]是收起按钮，点击后将重置锚点值，页面所有元素都不会匹配:target伪类</li>
        </ul>
        <div class="gs-target">
            文章内容，文章内容，文章内容文章内容，文章内容，文章内容文章内容，文章内容，文章内容
            <div id="articleMore" hidden></div>
            <a href="#articleMore" class="cs-button" data-open="true">阅读更多</a>
            <p class="cs-more-p">
                文章内容，文章内容，文章内容文章内容，文章内容，文章内容文章内容，文章内容，文章内容
            </p>
            <a href="##" class="cs-button" data-open="false">收起</a>

        </div>


    </div>
    <div class="content">
        <h3>:target伪类</h3>
        <a href="#ca-anchor" name='ca-anchor'>点击</a>
        <ul>
            <li id="ca-first">1</li>
            <li id="ca-anchor">2</li>
            <li id="ca-last">3</li>
            <li id="ca-last1">4</li>
        </ul>
    </div>
    <div class="content">
        <a href="javascript:" class="cs-button " role="button">a标签</a>
    </div>
    <div class="content">
        <h3>数字开头的选择器</h3>
        <span class="1-foo">颜色是？</span>
    </div>
    <div class="content">
        <h3>状态标识符</h3>
        <div id="content" class="cs-content ">
            文字内容
            <a href="#" id="more" class="cs-content-more">更多</a>
        </div>
    </div>
    <div class="content font-w">
        <div class="lightblue">
            <div class="darkblue">
                <p>1 颜色</p>
            </div>
        </div>
        <div class="darkblue ">
            <div class="lightblue">
                <p>1 颜色</p>
            </div>
        </div>
    </div>
    <div class="content font-w">
        <ol>
            <li>1</li>
            <li>2
                <ul>
                    <li>2-1</li>
                    <li>2-2</li>
                </ul>
            </li>
            <li>3</li>
        </ol>
    </div>
    <div class="content">
        <h3>相邻兄弟选择符</h3>
        <p class="gs-p">12</p>
        <p class="gs-p">12</p>
        <p class="gs-p">12</p>
        <p class="gs-p">12</p>

    </div>
    <div class="content">
        <h3>相邻兄弟选择符</h3>
        <input type="text"><span class="cs-tips">不超过十个字</span>
    </div>
    <div class="content">
        <h3>:hover显示</h3>
        <a href="#" class="gs-hover">图片链接</a>
        <img src="./xiangRiKui.webp" class="gs-hover-img" alt="">
    </div>
    <div class="content">
        <h3>:focus</h3>
        <div class="gs-focus">无属性</div>
        <div class="gs-focus" contenteditable="true">contenteditable</div>
        <div class="gs-focus" contenteditable="plaintext-only">contenteditable</div>
        <div class="gs-focus" tabindex="-1">tabindex</div>
        <div class="gs-focus" tabindex="0">tabindex</div>
        <div class="gs-focus" tabindex="2">tabindex</div>
    </div>
    <div class="content">
        <h3>点击图片显示完整图片</h3>
        <img class="gs-icon" src="./tuiChu.png" alt="" tabindex="0">
        <img class="img-qrcode" src="./xiangRiKui.webp" alt="">
    </div>
    <div class="content">
        <h3>:focus & :focus-within</h3>
        <div class="cs-normal">
            <label class="cs-label">用户名</label><input type="text" class="cs-input">
        </div>
        <div class="cs-details">
            <a href="#" class="cs-summary">我的消息</a>
            <div class="cs-datalist">
                <a href="#">我的回答</a>
                <a href="#">我的私信</a>
                <a href="#">未评价订单</a>
                <a href="#">我得关注</a>
            </div>
        </div>
    </div>
    <script>
        let more = document.getElementById('more')
        more.onclick = function () {
            content.className += 'active';
        }
    </script>
</body>

</html>